<template>
	<view class="container">
		<view class="content">
			<view class="toubu">
				<view class="kongbai">
					<input class="shurukuang" placeholder="搜索组件名称" />
					<button class="sousuo">搜索</button>
				</view>
				<view class="tiaojian">
					<view class="anniu">最近使用</view>
					<view class="anniu">使用次数</view>
					<view class="anniu">组件分类</view>
				</view>
			</view>
			<view class="liebiao">
				<uni-grid :column="1" :show-border="false" :square="false" @change="change">
					<uni-grid-item class="leibieliebiao" v-for="(item, index) in gaojizujianliebiao_data.gaojizujian_list_data" :key="index">
						<!-- <image class="ysyimage" :src="item.image" mode="aspectFill" ></image> -->
						<text class="text">{{ item.content }}</text>
						<image class="image" :src="item.image" mode="aspectFit"></image>
						<text class="miaoshu">{{ item.discreble }}</text>
					</uni-grid-item>
				</uni-grid>
			</view>
			<view class="button_anniu">新增高级组件</view>
		</view>
	</view>
</template>

<script>
import uniGrid from '@/components/uni-grid/uni-grid.vue';
import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue';
export default {
	components: { uniGrid, uniGridItem },
	data() {
		return {
			gaojizujianliebiao_data: {}
		};
	},
	async onLoad(option) {
		this.gaojizujianliebiao_data = await this.$api.json('gaojizujianliebiao_data');
		console.log(JSON.stringify(this.gaojizujianliebiao_data));
	},
	onShow() {
		// let params = {
		// 	"canshu1": this.gaojizujianliebiao_data.canshu1
		// };
		// upload_data(params, 'GET', this.$api.Apiurl.gongzuotaishouye_urlData.url, (res) => {
		// 	if (res.data.code == 1) {
		// 		this.gaojizujianliebiao_data = this.$api.Json.gaojizujianliebiao_data;
		// 	} else {
		// 		msg(res.data.msg);
		// 	}
		// });
	},
	methods: {
		change(e) {
			let { index } = e.detail;
			let link_url = this.gaojizujianliebiao_data.gaojizujian_list_data[index].url;
			uni.navigateTo({
				url: link_url
			});
		}
	}
};
</script>

<style>
.content {
	/* position: relative; */
}
.toubu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	margin-top: 82upx;
	z-index: 100;
	background-color: #ffffff;
}
.liebiao {
	margin-top: 180upx;
	z-index: -1;
}
.kongbai {
	/* background: #EDEDED; */
	width: 100%;
	height: 80upx;
	border-bottom: 2upx solid #ededed;
	display: flex;
	flex-direction: row;
	padding: 0upx 10upx;
}
.leibiaofenlei {
	margin-top: 50upx;
}
.image_set {
	width: 120upx;
	height: 120upx;
}
.text {
	color: #707070;
	font-size: 45upx;
	/* border: 1upx solid red; */
	/* 超出n行用省略号 */
	display: -webkit-box;
	overflow: hidden;
	white-space: normal !important;
	text-overflow: ellipsis;
	word-wrap: break-word;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.image {
	/* border: 1upx solid red; */
	width: 100%;
	/* background-color: #0081FF; */
}
.miaoshu {
	/* border: 1upx solid red; */
	width: 100%;
	/* 超出n行用省略号 */
	display: -webkit-box;
	overflow: hidden;
	white-space: normal !important;
	text-overflow: ellipsis;
	word-wrap: break-word;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.ysyimage {
	width: 120upx;
	height: 120upx;
}
.leibieliebiao {
	border-bottom: 2upx solid #909399;
	/* height: 540upx; */
	/* line-height: 200upx; */
}
.shurukuang {
	border: 2upx solid #ededed;
	border-radius: 13upx;
	/* width: 90%; */
	flex: 4;
	height: 100%;
	padding-left: 20upx;
	/* margin: 0upx auto; */
}
.sousuo {
	flex: 1;
	color: #6d6d6d;
}
.tiaojian {
	display: flex;
	flex: 1;
	border-bottom: 2upx solid #909399;
	height: 100upx;
	line-height: 98upx;
	padding: 5upx 0upx;
	margin-bottom: 10upx;
}
.anniu {
	border: 2upx solid #ededed;
	flex: 1;
	text-align: center;
	color: #6d6d6d;
	-moz-box-shadow: 0 0 20px #ededed;
	-webkit-box-shadow: 0 0 20px #ededed;
	box-shadow: 0 0 18px #ededed;
}
.anniu:not(:last-child) {
	margin-right: 10upx;
}
.button_anniu {
	position: fixed;
	bottom: 0;
	left: 0;
}
</style>
